<template>
    <view
          class="card" :class="{'invisible':!isGroupBtnEnabled}" @click="handleGroupBtnClick">
        <div icon="none">
            <div class="p-3px m-w-max-content">
                <SvgIcon name="object-group" class="m-auto tab-svg-fill" :size="24"/>
                <div class="label-text">创建分组</div>
            </div>
        </div>
    </view>
    <view
          class="card" :class="{'invisible':!isUnGroupBtnEnabled}" @click="handleUnGroupBtnClick">
        <div icon="none">
            <div class="p-3px m-w-max-content">
                <SvgIcon name="object-ungroup" class="m-auto tab-svg-fill" :size="24"/>
                <div class="label-text">解除分组</div>
            </div>
        </div>
    </view>
</template>

<script setup lang="ts">
import SvgIcon from "@/components/svgIcon/svgIcon.vue";
import {selectFiles} from "@/utils/designUtil";
import {Image as LeaferImage} from "leafer-ui";
import {getDefaultName} from "@/views/Editor/utils/utils";
import {useEditor} from "@/views/Editor/app";
import {keybindMap} from "@/views/Editor/utils/constants";

const {editor, keybinding} = useEditor()

const isGroupBtnEnabled = computed(() => {
    return !editor.activeObjectIsType('Frame') && editor.getActiveObjects().length > 1;
})

const isUnGroupBtnEnabled = computed(() => {
    return editor.activeObjectIsType('Group')
})

const handleGroupBtnClick = () => {
    if (isGroupBtnEnabled) {
        keybinding.trigger(keybindMap.group);
    }
};
const handleUnGroupBtnClick = () => {
    if (isUnGroupBtnEnabled) {
        keybinding.trigger(keybindMap.ungroup);
    }
};
const selectTabList = [
    {label: '创建分组', value: 'group', svgIcon: 'iconfont-replace', svgSize: 20, visible: ()=>{return isUnGroupBtnEnabled()}},
    {label: '解除分组', value: 'ungroup', svgIcon: 'iconfont-replace', svgSize: 20, visible:()=>{return isGroupBtnEnabled()}},
]
const changeTab = (item: any) => {
    console.log(item)
    if (item.value === 'group') {
        handleGroupBtnClick()
    }
    if (item.value === 'ungroup') {
        handleUnGroupBtnClick()
    }
}

</script>

<style scoped>
.invisible{
    display: none !important;
}
</style>
